﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Ecommerce</title>
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900%7CRoboto+Condensed:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/plugins/owl-carousel/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/plugins/Magnific-Popup/magnific-popup.css">
    <link rel="stylesheet" href="assets/plugins/animate-css/animate.min.css">
    <link rel="stylesheet" href="assets/plugins/swiper/swiper.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="assets/css/custom.css">
</head>

<body>
    <!-- 引入头部的部分 -->
    <div th:include="/front/header"></div>

    <!--  页标题 -->
    <section class="page-title-inner" data-bg-img='assets/img/page-titlebg.png'>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!-- 页面标题内 -->
                    <div class="page-title-wrap">
                        <div class="page-title-heading"><h1 class="h2"> 我们到处都在<span>联系</span></h1></div>
                        <ul class="list-unstyled mb-0">
                            <li><a href="index.html">家</a></li>
                            <li class="active"><a href="#">联系</a></li>
                        </ul>
                    </div>
                    <!-- 结束页面标题内页 -->
                </div>
            </div>
        </div>
    </section>
    <!-- 页面标题结束 -->

    <!-- 办公地址 -->
    <section class="pt-100 pb-100">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7 col-lg-8">
                    <!-- 办公室信息 -->
                    <div class="office-ifno-inner">
                        <h3>我们在这里为您提供更好的帮助</h3>
                        <p>改写文学作品或同情先生的谨慎。属于娱乐性或豪华小屋。如令人愉快的那样出现。接下来长久没有给先生的眼睛。钦佩崇拜者的年龄不高，他庆祝得如此之高，就像无保留的样子。</p>
                    </div>
                    <!--办公信息结束 -->

                    <!-- 办公地址 -->
                    <div class="office-addess-inner">
                        <div class="row">
                            <div class="col-md-6">
                                <!-- 单地址 -->
                                <div class="single-address">
                                    <h4>总部</h4>
                                    <ul class="list-unstyled mb-0">
                                        <li>西卡里街3100号,</li>
                                        <li>邮政信箱16122 Collins Street West</li>
                                        <li>维多利亚8007澳大利亚</li>
                                    </ul>
                                </div>
                                <!-- 单地址结束 -->
                            </div>
                            <div class="col-md-6">
                                <!-- 单地址 -->
                                <div class="single-address">
                                    <h4>工作时间</h4>
                                    <ul class="list-unstyled mb-0">
                                        <li>周一至周六上午11点至下午7点</li>
                                        <li>周日11 am-6pm</li>
                                        <li>星期五（休息日）</li>
                                    </ul>
                                </div>
                                <!-- 单地址结束 -->
                            </div>
                            <div class="col-md-6">
                                <!-- 单地址 -->
                                <div class="single-address">
                                    <h4>办公室01</h4>
                                    <ul class="list-unstyled mb-0">
                                        <li>邮政信箱16122 Collins Street West</li>
                                        <li>维多利亚8007澳大利亚</li>
                                    </ul>
                                </div>
                                <!-- 单地址结束-->
                            </div>
                            <div class="col-md-6">
                                <!-- 单地址 -->
                                <div class="single-address">
                                    <h4>办公室02</h4>
                                    <ul class="list-unstyled mb-0">
                                        <li>邮政信箱16122 Collins Street West</li>
                                        <li>维多利亚8007澳大利亚</li>
                                    </ul>
                                </div>
                                <!-- 单地址结束 -->
                            </div>
                        </div>
                    </div>
                    <!-- 办公地址结束 -->
                </div>

                <div class="col-md-5 col-lg-4">
                    <!-- 谷歌地图 -->
                    <div class="google-map-wrapper" data-latitude='40.7656561' data-longitude='-73.7691858' data-zoom='11' data-marker='assets/img/mapmarker.png'>
                        <div id="map"></div>
                    </div>
                    <!-- 谷歌地图结束 -->
                </div>
            </div>
        </div>
    </section>
    <!-- 办公地点 -->
    
    <!-- 保持联系 -->
    <section class="pb-100">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-5 col-lg-4">
                    <!-- 办公室的形象 -->
                    <div class="getin-touch-image">
                        <img src="assets/img/featuerd/office-info.png" data-rjs='2' alt="">
                    </div>
                    <!-- 办公室形象结束 -->
                </div>
                <div class="col-md-7 col-lg-8">
                    <!--办公地址形式-->
                    <div class="office-address-form">
                        <!-- office-address-head -->
                        <div class="office-address-head">
                            <h3>保持联系</h3>
                            <p>改写文学作品或同情先生的谨慎。属于娱乐性或豪华小屋。如令人愉快的那样出现。接下来长久没有给先生的眼睛。钦佩崇拜者的年龄不高，他庆祝得如此之高，就像无保留的样子</p>
                        </div>
                        <!-- 年底office-address-head -->
                        <div class="address-form-inner contact-page-form parsley-validate">
                            <form action="sendmail.php" method="POST" novalidate>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-form-group">
                                            <label>
                                                <img src="assets/img/icons/account-icon.svg" class="svg" alt="">
                                            </label>
                                            <input type="text" name="name" placeholder="Your name" class="theme-input-style" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-form-group">
                                            <label>
                                                <img src="assets/img/icons/email-icon.svg" class="svg" alt="">
                                            </label>
                                            <input type="email" name="email" placeholder="Email" class="theme-input-style" required>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="input-form-group">
                                            <label>
                                                <img src="assets/img/icons/subject.svg" class="svg" alt="">
                                            </label>
                                            <input type="text" name="subject" placeholder="Subject" class="theme-input-style">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="input-form-group">
                                            <label class="text-area">
                                                <img src="assets/img/icons/message.svg" class="svg" alt="">
                                            </label>
                                            <textarea name="message" class="theme-input-style" placeholder="Message"></textarea>
                                        </div>
                                        <button class="btn btn-fill-type mb-30">发送</button>

                                        <div class="form-response"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!--办公室地址表的结尾 -->
                </div>
            </div>
        </div>
    </section>
    <!-- 结束联系-->

    <!-- 我们的社会领域-->
    <section class="pb-100">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-5">
                    <!-- 我们地区的社会 -->
                    <div class="we-are-social">
                        <h3>我们是社会的</h3>
                        <p>改写文学作品或同情先生的轻率论是铁定的主题。</p>

                        <div class="footer-social-area">
                            <ul class="list-unstyled mb-0">
                                <li>
                                    <a href="#"><i class="fa fa-facebook"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fa fa-twitter"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fa fa-pinterest"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fa fa-linkedin"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fa fa-google-plus"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 我们的社交活动结束了 -->
                </div>
                <div class="col-md-7">
                    <div class="insta-feed-inner">
                        <div class="insta-feed-carousel2 owl-carousel" data-owl-margin='9' data-owl-items="4" data-owl-responsive='{"0": {"items": "2"},"768": {"items": "3"},"1170": {"items": "4"}}' data-owl-speed= "3000" data-owl-dots = 'false' data-owl-autoplay = 'false'>
                            <!-- 单一的旋转木马内 -->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta1.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!-- 单尾旋转索内侧 -->
                            <!-- 单一的旋转木马内 -->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta2.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!-- 单尾旋转索内侧 -->
                            <!-- 单一的旋转木马内 -->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta3.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!-- 单尾旋转索内侧 -->
                            <!-- 单一的旋转木马内 -->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta4.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!-- 单尾旋转索内侧 -->
                            <!-- 单一的旋转木马内 -->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta5.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!-- 单尾旋转索内侧 -->
                            <!-- 单一的旋转木马内 -->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta6.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!-- 单尾旋转索内侧 -->
                            <!-- 单一的旋转木马内 -->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta7.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!-- 单尾旋转索内侧 -->
                            <!-- 单一的旋转木马内 -->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta8.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!-- 单尾旋转索内侧 -->
                            <!-- 单一的旋转木马内 -->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta9.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!-- 单尾旋转索内侧 -->
                            <!-- 单一的旋转木马内 -->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta10.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!-- 单尾旋转索内侧 -->
                            <!-- 单一的旋转木马内-->
                            <div class="single-carousel-inner">
                                <a href="#">
                                    <img src="assets/img/social/insta11.jpg" alt="">
                                    <div class="figurecaption">
                                        <span><i class="fa fa-comment"></i>24</span>
                                        <span><i class="fa fa-heart"></i>24</span>
                                    </div>
                                </a>
                            </div>
                            <!--单尾旋转索内侧 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 我们的社交圈结束了-->

    <!-- 页脚区 -->
    <!-- 引入页面尾部的部分 -->
    <div th:include="/front/footer"></div>
        <!-- 页脚区域结束 -->
        
    <!-- 返回顶部 -->
    <div class="back-to-top">
            <a href="#">
                <div class="back-toop-tooltip"><span>返回顶部</span></div>
                <div class="top-array"></div>
                <div class="top-line"></div>
            </a>
        </div>
        <!--返回顶部 -->
    
        <!-- 模态快速视图-->
        <div class="modal-quickview-container">
            <div class="quick-view-content-wrap">
                <div class="modal-window-overlay"></div>
                <div class="quick-view-content">
                    <div class="modal-window-close">
                        <img src="assets/img/icons/close-button.svg" class="svg" alt="">
                    </div> 
                    <div class="quick-view-content-inner">
                        <div class="row align-items-center">
                            <div class="col-lg-7">
                                <!-- 产品启动滑块 -->
                                <div class="shop-product-slider-wrap">
                                    <!-- 开始铺顶侧滑块 -->
                                     <div class="swiper-container quick-product-gallery">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <img class='' src="assets/img/shop/quick-view1.png" alt="" data-rjs="2" />
                                            </div>
                                            <div class="swiper-slide">
                                                <img class='' src="assets/img/shop/quick-view2.png"  alt="" data-rjs="2" />
                                            </div>
                                            <div class="swiper-slide">
                                                <img class='' src="assets/img/shop/quick-view3.png" alt="" data-rjs="2" />
                                            </div>
                                            <div class="swiper-slide">
                                                <img class='' src="assets/img/shop/quick-view4.png" alt="" data-rjs="2" />
                                            </div>
                                        </div>
                                    </div>
                                     <!-- 年底的滑块顶部侧 -->
                                    
                                    <!-- 启动滑块底部侧 -->
                                    <div class="swiper-container quick-product-thumbs">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <img src="assets/img/shop/details-nav1.png" data-rjs="2" alt="">
                                            </div>
                                            <div class="swiper-slide">
                                                <img src="assets/img/shop/details-nav3.png" data-rjs="2" alt="">
                                            </div>
                                            <div class="swiper-slide">
                                                <img src="assets/img/shop/details-nav4.png" data-rjs="2" alt="">
                                            </div>
                                            <div class="swiper-slide">
                                                <img src="assets/img/shop/details-nav5.png" data-rjs="2" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 端面滑块底面 -->
                                </div>
                                <!-- 商店结束产品滑块 -->
                            </div>
    
                            <div class="col-lg-5">
                                <!-- 产品详细信息内 -->
                                <div class="product-details-inner">
                                    <!-- 产品信息-->
                                    <div class="product-info">
                                        <div class="product-rating">
                                            <div class="star-rating">
                                                <span></span>
                                            </div>
                                        </div>
    
                                        <!-- 产品标题 -->
                                        <div class="product-title">
                                            <h2><a href="shop-details.html">编织抱枕</a></h2>
                                        </div>
                                        <!-- 产品名称结束 -->
    
                                         <div class="product-price"><h3 class="new-price">$25</h3><h5 class="old-price">$30.1</h5></div>
    
                                         <div class="product-description">
                                             <p>老板娘把把这位先生的女儿哄得很开心乐.</p>
                                         </div>
    
                                        <!-- 产品组列表 -->
                                        <div class="list-product-group">
                                            <ul class="mb-0 list-unstyled">
                                                <li class="size-group group">
                                                    <span class="list-heading">尺寸:</span>
                                                    <ul class="size-list mb-0 list-unstyled">
                                                        <li><a href="#" class="product-size"><span>L</span></a></li>
                                                        <li><a href="#" class="active product-size"><span>M</span></a></li>
                                                        <li><a href="#" class="product-size"><span>S</span></a></li>
                                                    </ul>
                                                </li>
                                                <li class="quantity-group group">
                                                    <span class="list-heading">数量:</span>
                                                    <div class="product-quantity">
                                                        <span class="minus"><img src="assets/img/icons/minus.svg" class="svg" alt=""></span>
                                                        <input type="text" value="0" class="product-quantity-list product-size">
                                                        <span class="plus"><img src="assets/img/icons/plus.svg" class="svg" alt=""></span>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <!-- 列表产品组结束 -->
    
                                        <!-- 产品细节btn -->
                                        <div class="product-details-btns">
                                            <div class="addto-bag-btn">
                                                <a href="#" class="btn btn-fill-type">
                                                    <span><img src="assets/img/icons/add-bag.svg" alt="" class="svg"></span><span class="d-none d-lg-block mr-0">加入购物车</span>
                                                </a>
                                            </div>
                                             <div class="wish-btn">
                                                <a href="#" class="btn btn-fill-type">
                                                    <span class=""><img src="assets/img/icons/wishlist.svg" alt="" class="svg"></span><span class="d-none d-lg-block mr-0"></span>
                                                </a>
                                            </div>
                                            <div class="compare-btn">
                                                <a href="#" class="btn btn-fill-type">
                                                    <span><img src="assets/img/icons/compare.svg" alt="" class="svg"></span>
                                                </a>
                                            </div>
                                        </div>
                                        <!-- 产品细节btn -->
    
                                        <!--更多的细节 -->
                                        <div class="more-details-button">
                                            <a href="shop-details.html" class="btn btn-line roboto">更多的细节</a>
                                        </div>
                                        <!-- 更多细节结束 -->
    
                                        <!-- 产品马塔-->
                                        <div class="product_meta item-product-meta-info">
                                            <span class="sku_wrapper">
                                                <label>
                                                    库存单位:
                                                    <span>N/A</span>
                                                </label>
                                            </span>
                                            <span class="posted_in">
                                                <span class="meta-item-list">
                                                    <a href="#">附件</a>,
                                                    <a href="#">时尚</a>,
                                                    <a href="#">夏季</a>
                                                </span>
                                            </span>
                                        </div>
                                        <!-- 成品mata -->
                                    </div>
                                     <!-- 产品信息结束 -->
                                </div>
                                <!-- 产品细节结束内页 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        <!--模态快速视图结束-->
    
        <!-- 添加添加到购物车通知 -->
        <div class="modal-add-notifacition">
            <div class="add-notifacition-inner media align-items-center">
                <div class="add-noti-image">
                    <img src="assets/img/product/add-note.jpg" alt="">
                </div>
                <div class="add-noti-text media-body">
                    <span>猫眼放大镜</span>
                    <p>添加到您的购物车成功!</p>
                </div>
            </div>
        </div>
        <!-- 添加添加到购物车通知 -->
    
        <!-- 添加添加到购物车通知 -->
        <div class="modal-wish-notifacition">
            <div class="wish-notifacition-inner media align-items-center">
                <div class="wish-noti-image">
                    <img src="assets/img/product/add-note.jpg" alt="">
                </div>
                <div class="wish-noti-text media-body">
                    <span>猫眼放大镜</span>
                    <p>添加到您的购物车成功!</p>
                </div>
            </div>
        </div>
        <!-- 添加添加到购物车通知 -->
    
        <!-- JS Files -->
       <!-- ==== JQuery 3.3.1 js file==== -->
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
    <script src="assets/plugins/parsley/parsley.min.js"></script>
    <script src="assets/plugins/retinajs/retina.min.js"></script>
    <script src="assets/plugins/parallax/parallax.js"></script>
    <script src="assets/plugins/parallax/parallaxh.min.js"></script>
    <script src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
    <script src="assets/plugins/Magnific-Popup/jquery.magnific-popup.min.js"></script>
    <script src="assets/plugins/waypoints/jquery.counterup.min.js"></script>
    <script src="assets/plugins/isotope/packery.pkgd.min.js"></script>
    <script src="assets/plugins/swiper/swiper.min.js"></script>
    <script src="assets/plugins/countdown/jquery.countdown.min.js"></script>
    <script src="assets/plugins/Magnific-Popup/jquery.elevateZoom-3.0.8.min.js"></script>
    <script src="assets/plugins/tweenmax/TweenMax.min.js"></script>
    <script src="assets/plugins/text-animation/anime.min.js"></script>
    <script src="http://ditu.google.cn/maps/api/js?key=AIzaSyB2D8wrWMY3XZnuHO6C31uq90JiuaFzGws"></script>
    <script src="assets/js/scripts.js"></script>
    <script src="assets/js/custom.js"></script>
    
</body>
</html>